<script>
export default{
    data() {
        return {
            flag:false,
            searchText:'',
            dataMap:null,
            list:[]
        }
    },
    methods: {
        searchFn(){
            console.log(this.searchText);
            var options = {
            onSearchComplete: (results)=>{
                // 获取查询数量
                // console.log(results.getCurrentNumPois());
                // 获取所有地点
                console.log(results._pois);
                // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS){
                        this.list=results._pois

                        // 对搜索到的地点添加点标记
                        for (let i = 0; i<results._pois.length; i++) {

                            var point =  results._pois[i].point

                            var marker = new BMapGL.Marker(point);      
                            this.dataMap.addOverlay(marker);
                        }
                    }
                }
            };
            var local = new BMapGL.LocalSearch(this.dataMap, options);
            local.search(this.searchText);
        }
    },
    mounted() {
        //设置地图实例
        var map = new BMapGL.Map("container");
        this.dataMap = map
        
        //创建点坐标
        var point = new BMapGL.Point(120.2155118, 30.25308298);
        
        //初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 15); 
        
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);

        //设置地图旋转角度
        // map.setHeading(64.5);   
        //设置地图的倾斜角度    
        // map.setTilt(73);       
        //设置地图类型为地球模式
        // map.setMapType(BMAP_EARTH_MAP);  
        //自定义地图
        // map.setMapStyleV2({     
        //     styleId: '86bfdeecbb94871232154381abcd7ce0'
        // });
        // 添加比例尺控件
        var scaleCtrl = new BMapGL.ScaleControl({
            // 设置位置为左上角
            // anchor:BMAP_ANCHOR_TOP_LEFT
            //设置偏移
            offset: new BMapGL.Size(0, 0)
        });  
        map.addControl(scaleCtrl);
        // 添加缩放控件
        var zoomCtrl = new BMapGL.ZoomControl();  
        map.addControl(zoomCtrl);
         // 添加城市列表控件
        var cityCtrl = new BMapGL.CityListControl(); 
        map.addControl(cityCtrl);


        // 创建标记点
        // //创建点
        var point = new BMapGL.Point( 120.2155118, 30.25308298);   
        // // 创建标注   
        var marker = new BMapGL.Marker(point);      
        // // 将标注添加到地图中
        map.addOverlay(marker);    
        
        // 添加事件
        marker.addEventListener("click", ()=>{   
            this.flag=true
        });

        //添加折线
        // var polyline = new BMapGL.Polyline([
		// new BMapGL.Point(116.399, 39.910),
		// new BMapGL.Point(116.405, 39.920),
		// new BMapGL.Point(116.425, 39.900)
        //     ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
        // map.addOverlay(polyline);
        

        // 创建图标点
        // var myIcon = new BMapGL.Icon("@/assets/zif.png", new BMapGL.Size(23, 25), {   
        // 指定定位位置。  
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
        // 图标中央下端的尖角位置。  
        // anchor: new BMapGL.Size(10, 25), 
         // 设置图片偏移。  
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
        // imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
        // });  
         // 创建标注对象并添加到地图  
        // var marker = new BMapGL.Marker(point, {icon: myIcon});   
        // map.addOverlay(marker);   
        
        
        //创建检索对象
        // var localcity = new BMapGL.LocalCity();
        // localcity.get(e => {
        //     console.log(e);
        // });
    }
}
</script>
<template>
    <h4>
        百度地图
        <el-input @keyup.enter="searchFn" v-model="searchText" placeholder="请输入查询内容" type="text" />
    </h4>
    <div id="container"></div>
    <h1 v-if="flag">店家信息</h1>
    
    <!-- 渲染查询内容 -->
    <ul>
        <li v-for="item in list" key='item.uid' >
            {{ item.address+item.title}}
        </li>
    </ul>
</template>
<style lang="scss" scoped>
    #container{
        width:100%;
        height:600px;
    }
</style>